<template>
  <div class="box">
<!--   使用v-decorator时，去除输入数据的前后空格，或者说是限制输入首尾空格   -->
    <a-button type="primary" @click="clickBtn">提交按钮</a-button>
    <a-form :form="editForm">
      <a-form-item label="编号：">
<!--                rules:[{require:true,message:'请输入编号'}],-->
                <a-input
                  v-decorator="['number',options]">
                </a-input>
<!--        { getValueFromEvent: {event =>  event.target.value.trim()} }-->
      </a-form-item>
      <a-form-item>

      </a-form-item>
    </a-form>
  </div>
</template>

<script>

export default {
  name: 'demo',
  components: {},
  data () {
    return {
      editForm: this.$form.createForm(this),
      options: {
        rules: [{ required: true, message: '请输入编号' }],
        // 使用trim的去掉首尾空格
        getValueFromEvent: event => event.target.value.trim()
        // 下面的正则替换首尾空格
        // getValueFromEvent: event => event.target.value.replace(/(^\s*)|(\s*$)/g, '')
        // 去除数据中所有空格
        // getValueFromEvent: event => event.target.value.replace(/\s+/g, '')
      }
    }
  },
  methods: {
    clickBtn () {
      // console.log(this.editForm)
      const formData = this.editForm.getFieldsValue()
      console.log(formData)
    }
  }
}
</script>

<style scoped>
  .box {
    width: 400px;
    margin: 30px 30px;
  }
</style>
